<template>
  <el-card shadow="never">
    <template #header>
      <div class="flex justify-between">
        <span class="text-sm">订单统计</span>
        <div>
          <el-check-tag v-for="(item, index) in options" :key="index" :checked="current == item.value"
            style="margin-right:8px" @click="handleChoose(item.value)">
            {{ item.text }}
          </el-check-tag>
        </div>

      </div>
    </template>
    <div ref="el" id="chart" style="width:100%;height:300px">

    </div>
  </el-card>

</template>

<script setup>

import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts';
import { useResizeObserver } from '@vueuse/core';

import { getStatistics3 } from '~/api/index.js'

const current = ref('week')
const options = [{
  text: '近1个月',
  value: 'month'
},
{
  text: '近1周',
  value: 'week'
},
{
  text: '近24小时',
  value: 'hour'
}]

const handleChoose = (type) => {
  // 把当前点击的值等于显示的值
  current.value = type
  // 重新获取数据
  getDate()
}
// 页面渲染后
let myChart = null
onMounted(() => {
  const chartDom = document.getElementById('chart');
  if (chartDom) {
    myChart = echarts.init(chartDom);
    getDate()
  }
})

onBeforeUnmount(() => {
  // 判断chart 实例对象存不存在
  if (myChart) echarts.dispose() // 销毁实例
})

function getDate() {
  const option = {
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  };

  myChart.showLoading()
  getStatistics3(current.value).then(res => {
    option.xAxis.data = res.x
    option.series[0].data = res.y
    myChart.setOption(option)
  }).finally(() => {
    myChart.hideLoading()
  })
}
const el = ref(null)
useResizeObserver(el, (entries) => {
  myChart.resize()
})

</script>

<style lang="scss" scoped>

</style>